<link rel="stylesheet" href="./Fuentes/css/Listado.css">
<script type="text/javascript" src="./Fuentes/js/Listado.js"></script>

<!-- SIDE BAR -->
<div class="sidebar" id="sidebar" >
    <table width="100%" style="background-color: transparent;" >
        <tr height="40px">
            <td class="text-left h4" valign="bottom" style="font-size: 20px; font-weight: bold;" colspan="2">PARTICIPANTES</td>
        </tr>
        <tr height="30px">
            <td class="text-left h4" >TOTAL:</td>
            <td class="text-right h4" id="inscriptos">0</td>
        </tr>
        <tr class="linea" height="30px">
            <td class="text-left h4" >EN JUEGO:</td>
            <td class="text-right h4" id="concursantes">0</td>
        </tr>
        <tr height="40px">
            <td class="text-left h4" valign="bottom" style="font-size: 20px; font-weight: bold;" colspan="2">COMPRAS</td>
        </tr>
        <tr height="30px">
            <td class="text-left h4" >REBUYS:</td>
            <td class="text-right h4" id="recompras">0</td>
        </tr>
        <tr class="linea" height="30px">
            <td class="text-left h4" >ADDONS:</td>
            <td class="text-right h4" id="addons">0</td>
        </tr>
        <tr height="40px">
            <td class="text-left h4" valign="bottom" style="font-size: 20px; font-weight: bold;" colspan="2">PUNTOS</td>
        </tr>
        <tr height="30px">
            <td class="text-left h4" >TOTAL:</td>
            <td class="text-right h4" id="puntosTotal">0</td>
        </tr>
        <tr class="linea" height="30px">
            <td class="text-left h4" >PROMEDIO:</td>
            <td class="text-right h4" id="puntosPromedio">0</td>
        </tr>
        <tr height="40px">
            <td class="text-left h4" valign="bottom" style="font-size: 20px; font-weight: bold;" colspan="2">POZO</td>
        </tr>
        <tr class="linea" height="30px">
            <td class="text-right h4" colspan="2" id="pozo">0</td>
        </tr>
        <tr height="40px">
            <td class="text-left h4" valign="bottom" style="font-size: 20px; font-weight: bold;" colspan="2">JUEGO</td>
        </tr>
        <tr height="30px">
            <td class="text-left h4" >NIVEL:</td>
            <td class="text-right h4" id="nivel">0</td>
        </tr>
        <tr height="30px">
            <td class="text-left h4" >ANTE:</td>
            <td class="text-right h4" id="ante">0</td>
        </tr>
        <tr class="linea" height="30px">
            <td class="text-left h4" >CIEGAS:</td>
            <td class="text-right h4" id="ciegas">0 / 0</td>
        </tr>        
    </table>
    <div class="controles">
        <div class="btn-group btn-group-justified" id="botoneraClock" style="display: none;">
            <a href="#" class="btn btn-default" id="btnPlay" onclick="controlJuego('PLAY')"><span class="glyphicon glyphicon-play"></span></a>
            <a href="#" class="btn btn-default" id="btnPause" onclick="controlJuego('PAUSE')"><span class="glyphicon glyphicon-pause"></span></a>
            <a href="#" class="btn btn-default" id="btnRestart" onclick="controlJuego('RESTART')"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <div class="btn-group btn-group-justified" id="btnHabilitarJuego" style="display: none;">
            <a href="#" class="btn btn-warning" onclick="habilitarJuego();"><span class="glyphicon glyphicon-ok"></span> HABILITAR TORNEO</a>
        </div>
    </div>
</div>


<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" onclick="refreshAll();" ><div style="font-size: 20px" id="torneoNombre">Terminal Supervisor</div></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="nav navbar-nav navbar-right">
                <p class='navbar-text'>&nbsp;</p>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" onclick="refreshAll();">&nbsp;<span class="glyphicon glyphicon-refresh"></span>&nbsp;</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-cog'></span> <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><div class="text-center"><p style="font-size: 50px;"><span class='glyphicon glyphicon-user'></span></p><p> <?php echo $_SESSION['usuario']['apenom'] ?></p></div></li>
                            <li class="divider"></li>
                            <li><a href="#" onclick="unsetTorneo();"><span class='glyphicon glyphicon-random'></span>&nbsp; Cambiar Torneo</a></li>
                            <li><a href="#" onclick="reorganizarJugadores();"><span class='glyphicon glyphicon-fullscreen'></span>&nbsp; Reorganizar Jugadores</a></li>
                            <li><a href="#" onclick="finalizarJuego();"><span class='glyphicon glyphicon-remove'></span>&nbsp; Finalizar Torneo</a></li>
                            <li class="divider"></li>
                            <li style="background-color: rgba(255, 0, 0, .1)" ><a href="#" onclick="logout();"><span class='glyphicon glyphicon-off'></span>&nbsp; Cerrar Sesión</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="nav navbar-nav navbar-right">
                <form class="navbar-form navbar-right" id="formSearch" name="formSearch" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Buscar" id="bxSearch" name="bxSearch" autofocus="true" >
                    </div>
                    <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search"></span></button>
                </form>
            </div>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="col-sm-offset-3 col-sm-9" id="listado"></div>